// src/App.jsx
import React, { useState } from "react";
import { useNavigate, Outlet, useLocation } from "react-router-dom";
import { Badge, TabBar, Image } from "antd-mobile";
import img1 from "./images/me.png";
import img2 from "./images/work.png";
import img3 from "./images/xz.png";
import img4 from "./images/tx.png";

export default function App() {
  const navigate = useNavigate();
  const location = useLocation();
  const image = [img2, img3, img4, img1];

  // tabbar 定义信息
  const tabs = [
    {
      key: "/forWork",
      title: "工作台",
    },
    {
      key: "/layout/consultation",
      title: "医疗协作",
    },
    {
      key: "/txl",
      title: "通讯录",
    },

        //更新 我的跳转信息
    {
      key: "/my",
      title: "我的",
    },
  ];

  // 获取当前激活的 tab
  const getActiveKey = () => {
    const pathname = location.pathname;
    if (pathname.includes('/layout/')) {
      return '/layout/consultation';
    }
    return pathname;
  };

  return (
    <div style={{ paddingBottom: '50px' }}>
      <Outlet />
      <TabBar
        activeKey={getActiveKey()}
        safeArea
        style={{
          position: "fixed",
          bottom: 0,
          width: "100%",
          paddingTop: "3px",
          borderTop: "1px solid rgba(150,205,238,0.6)",
          background: '#fff'
        }}
      >
        {tabs.map((item, index) => (
          <TabBar.Item
            key={item.key}
            title={item.title}
            icon={
              <Image
                src={image[index]}
                alt="icon"
                style={{ width: 22, height: 22 }}
                onClick={() => {
                  navigate(item.key);
                }}
              />
            }
          />
        ))}
      </TabBar>
    </div>
  );
}